<template>
  <el-dialog v-model="dialogVisible" title="绑定套餐包" width="500px" :close-on-click-modal="false" destroy-on-close>
    <div class="vip-renewal-container">
      <el-form :model="formData" :rules="rules" ref="formRef">
        <el-select v-model="formData.auth_package_id" placeholder="请选择套餐包">
          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="SetShopPackageModal">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { ElMessage, type FormInstance, type FormItemRule } from "element-plus";
import { getPackageListApi, setShopPackageApi } from "@/api/modules/permission";

interface Props {
  modelValue: boolean;
  shopId: number;
  bindId: number | undefined;
}

interface PackageItem {
  name: string;
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  shopId: 0,
  bindId: undefined
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

watch(
  () => props.bindId,
  async () => {
    formData.auth_package_id = props.bindId;
  }
);

const packageList = ref<PackageItem[]>([]);
const formRef = ref<FormInstance>();
const loading = ref(false);

const formData = reactive<{ auth_package_id: number | undefined }>({
  auth_package_id: undefined
});

const rules = {
  auth_package_id: [{ required: true, message: "请选择套餐包", trigger: "blur" }]
} as Record<string, FormItemRule[]>;

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate();
  loading.value = true;
  const { code } = await setShopPackageApi({
    shop_id: props.shopId,
    auth_package_id: formData.auth_package_id
  });
  if (code === 1) {
    ElMessage({
      message: "更新成功",
      type: "success"
    });
    emit("update:modelValue", false);
    emit("success", false);
  }
  loading.value = false;
};
const getPackageList = async () => {
  const { code, data } = await getPackageListApi({ loading: false });
  if (code === 1) {
    packageList.value = data.list;
  }
};
onMounted(() => {
  getPackageList();
});
</script>

<style lang="scss" scoped>
.vip-renewal-container {
  padding: 20px 0;
  .info-section {
    padding: 20px;
    margin-bottom: 24px;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        width: 120px;
        font-size: 14px;
        color: #606266;
      }
      .value {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
  .renewal-section {
    padding: 0 20px;
    :deep(.el-form-item__label) {
      font-weight: 500;
    }
    :deep(.el-input-number) {
      width: 100%;
    }
  }
}
.dialog-footer {
  padding-top: 20px;
  text-align: right;
}
</style>
